<template>
	<div class="book">
		<div class="title">
			<span>书本管理</span>
			<button @click="add()">添加</button>
		</div>
		<el-table :data="list" style="width: 100%">
			<el-table-column width="250px" label="名称" prop="name"></el-table-column>
			<el-table-column label="编号" prop="sn"></el-table-column>
			<el-table-column label="作者" prop="author" width="250px"></el-table-column>
			<el-table-column label="出处" prop="publisher"></el-table-column>
			<el-table-column label="日期" prop="tpublish">
				<template #default="scope">
					{{filterdate(scope.row)}}
				</template>
			</el-table-column>
			<el-table-column label="图片">
				<template #default="scope">
					<img :src="`${$Imgurl}/showImg/${scope.row.picture}`">
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<button @click="btn(scope.row)">修改</button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination layout="prev, pager, next" @current-change="pageChange" :page-size="num" :current-page="start" :total="total"></el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'Bookcon',
		data() {
			return {
				list: [],
				num:5,
				start:1,
				total:50

			}
		},
		methods: {
			//分页
			pageChange(n){
				this.start=n
				this.axios.get('/api/adm/book/findByPage/'+n+"/"+this.num).then( (res)=>{
					this.total=res.data.data.total
					this.list=res.data.data.books
				} ).catch( (error)=>{
					console.log(error);
				} )
			},
			btn(val) {
				this.$router.push({
					path: '/admin/bookup',
					query: {
						bookup: val.id
					}
				})
			},
			add() {
				this.$router.push({
					path: '/admin/bookup',
					query: {
						bookup: 0
					}
				})
			}
		},
		created() {
			this.axios.get('/api/adm/book/findByPage/1/6').then((res) => {
				this.list = res.data.data.books
			}).catch((error) => {
				console.log(error);
			}),
			this.axios.get('/api/adm/book/findByPage/2/5').then( (res)=>{
				this.total=res.data.data.total
			} ).catch( (error)=>{
				console.log(error);
			} )
		},
		computed: {
			filterdate() {
				return(val)=>{
					let date=new Date(val.tpublish)
					let y=date.getFullYear()
					let d=date.getMonth()+1
					let m=date.getDate()
					return `${y}-${d}-${m}`
				}
			},
		}
	}
</script>

<style scoped>
	.title {
		margin-bottom: 5%;
	}

	.title span {
		font-size: 23px;
		margin: auto;
		text-indent: 1em;
		height: 50px;
		width: 90%;
		display: block;
		line-height: 50px;
		border-bottom: 2px solid gainsboro;
		font-weight: bold;
	}

	.title button {
		float: right;
		height: 30px;
		margin-top: 10px;
		width: 100px;
		color: gold;
		margin-right: 10px;
		background-color: #FF0000;
		border-radius: 5px;
		border: none;
	}

	.title button:hover {
		cursor: pointer;
		background-image: url(../../../../public/bannerimg/10.jpg);
	}

	table {
		width: 80%;
		margin: auto;
		border: 1px solid black;
	}

	table tr th {
		font-weight: bold;
	}

	table tr td,
	th {
		border: 1px solid black;
		height: 30px;
		font-size: 15px;
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 30px;
	}

	table tr td img {
		vertical-align: middle;
		height: 100px;
	}

	table button {
		background-color: #FF0000;
		border: none;
		color: gold;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 5px;
	}

	input {
		width: 400px;
		height: 30px;
		margin-top: 10px;
		margin-left: 25px;
		border-radius: 5px;
		border: 1px solid red;
		outline: none;
		text-indent: 1em;
	}

	select {
		width: 400px;
		height: 30px;
		margin-top: 10px;
		margin-left: 20px;
		border-radius: 5px;
		border: 1px solid red;
		outline: none;
		text-indent: 1em;
	}
</style>
